import React, { Component } from "react";
import { Form, Input, DatePicker, Modal, Button, Upload } from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { RangePicker } = DatePicker;
const { TextArea } = Input;

class EditForm extends Component {
    state={
        file:null,
    }
    render() {
        const { visible, onCancel, onOk, form, confirmLoading, currentRowData } = this.props;
        // console.log(currentRowData);
        const { getFieldDecorator, setFieldsValue } = form;
        const {
            activityId,
            activityTime='2022年2月22日到2022年4月1日',
            activitySpot,
            activityImg,
            shopContent,
            fullTitle,
            shortTitle,
        } = currentRowData;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        console.log(activityTime);
        // const disabledDate = current => current && current > moment().endOf('day') || current < moment().subtract(6, 'months');
        const defaultSelectDate = {//此处报错，因为组件在执行之初就已经挂载并赋值完成，因为导致activityTime为undefined
            startDate: moment(activityTime.split("到")[0] || "YYYY年MM月DD日", "YYYY年MM月DD日"),
            endDate: moment(
                activityTime.split("到")[1] || activityTime.split("至")[0] || "YYYY年MM月DD日",
                "YYYY年MM月DD日"
            ),
        };
        return (
            <Modal
                title="编辑"
                visible={visible}
                onCancel={onCancel}
                onOk={()=>onOk(this.state,setFieldsValue)}
                confirmLoading={confirmLoading}
            >
                <Form {...formItemLayout}>
                    <Form.Item label="商品id:">
                        {getFieldDecorator("activityId", {
                            initialValue: activityId,
                            rules: [{ required: true }],
                        })(<Input disabled={true}/>)}
                    </Form.Item>
                    {/* <Form.Item label="活动全称:">
                        {getFieldDecorator("fullTitle", {
                            initialValue: fullTitle,
                            rules: [{ required: true }],
                        })(<Input placeholder="全称" />)}
                    </Form.Item> */}
                    <Form.Item label="商家名称:">
                        {getFieldDecorator("shortTitle", {
                            initialValue: shortTitle,
                            rules: [{ required: true }],
                        })(<Input placeholder="商家名称" />)}
                    </Form.Item>
                    {/* <Form.Item label="活动时间:">
                        {getFieldDecorator("activityTime", {
                            rules: [{ required: true, message: "请选择时间!" }],
                            initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate],
                        })(
                            <RangePicker
                                showTime
                                disabledDate={this.disabledDate}
                                format="YYYY年MM月DD日"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="活动地点:">
                        {getFieldDecorator("activitySpot", {
                            initialValue: activitySpot,
                            rules: [{ required: true }],
                        })(<Input />)}
                    </Form.Item> */}
                    <Form.Item label="商品图片:">
                        {getFieldDecorator("activityImg", {
                            initialValue: activityImg,
                            rules: [{ required: false }],
                        })(<Input disabled={true} />)}
                        <Upload
                            action="https://api.hiehie.top:6001/upload/" //此处被编辑----------------------------------------------------------
                            listType="picture"
                            maxCount={1}
                            accept="image/gif,image/png,image/jpg,image/jpeg,image/svg,image/webp"
                            showUploadList={false}
                            method="post"
                            onChange={(f) => {
                                console.log("onChange",f);
                                setFieldsValue({
                                    activityImg: f.file.name,
                                });
                            }}
                            beforeUpload={file => {
                                console.log(file)
                                this.setState({
                                    file:file
                                })
                                return false;
                            }}
                            name="image"
                        >
                            <Button>上传图片</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="商家介绍:">
                        {getFieldDecorator("shopContent", {
                            initialValue: shopContent,
                            
                        })(<TextArea rows={4} placeholder="请输入商家介绍" />)}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create({ name: "EditForm" })(EditForm);
